<template>
  <div>
    <div class="categoty">
      <Category :disabled="add_edit_show"></Category>
    </div>
    <div class="container" v-show="!add_edit_show">
      <el-card>
        <el-button v-has="'btn.Attr.add'" :disabled="categoryStore.c3Id == ''" type="primary" style="margin-bottom: 20px" @click="addAttr">添加属性</el-button>

        <el-table :data="AttrDate" style="width: 100%">
          <el-table-column type="index" label="序号" width="180" />
          <el-table-column prop="attrName" label="属性名称" width="180" />
          <el-table-column prop="attrValueList" label="属性值名称">
            <template #="{ row }">
              <el-tag style="margin-right: 5px" v-for="item in row.attrValueList" :key="item.id">{{ item.valueName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #="{ row }">
              <el-button v-has="'btn.Attr.update'" @click="editAttr(row)" type="primary" icon="Edit" circle />
              <el-button v-has="'btn.Attr.remove'" @click="deleteAttr(row)" type="danger" icon="Delete" circle />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="add_or_edit" v-show="add_edit_show">
      <AddOrEdit ref="addOrEditRef" @change-add-edit-show="changeShow"></AddOrEdit>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onMounted, ref, watch } from 'vue'
import { useCategoryStore } from '@/store/module/category'
import { reqAttr, reqRemoveAttr } from '@/utils/api/product/attr'
import { Attr } from '@/utils/api/product/attr/type'
import { AxiosResData } from '@/utils/api/common_type'
import { cloneDeep } from 'lodash'
// import AddOrEdit from './AddOrEdit.vue'

// 异步组件
const Category = defineAsyncComponent(() => import('@/components/category/Category.vue'))
// 如果使用异步会造成子组件用不了$parent上的属性 但通过两层parent就可以获取到
const AddOrEdit = defineAsyncComponent(() => import('./AddOrEdit.vue'))

const categoryStore = useCategoryStore()

const AttrDate = ref<Attr[]>([])
const add_edit_show = ref<boolean>(false)
const addOrEditRef = ref<any>()

onMounted(() => {
  categoryStore.get_c1_async()
})

// 请求attr属性
const getAttr = async () => {
  const res: AxiosResData<Attr[]> = await reqAttr(categoryStore.c1Id, categoryStore.c2Id, categoryStore.c3Id)
  if (res.data.code == 200) {
    AttrDate.value = res.data.data
  }
}

// 添加属性
const addAttr = () => {
  addOrEditRef.value.clearAllData()
  add_edit_show.value = true
}

// 改变添加或者编辑框的状态
const changeShow = (flag: boolean) => {
  add_edit_show.value = flag
}

// 编辑属性
const editAttr = (row: Attr) => {
  addOrEditRef.value.updateAttrParams(cloneDeep(row))
  add_edit_show.value = true
}

// 删除属性
const deleteAttr = async (row: Attr) => {
  const res = await reqRemoveAttr(row.id!)
  if (res.data.code == 200) {
    ElMessage.success('删除成功')
    getAttr()
  }
}

// 监听categoty仓库的c3ID
watch(
  () => categoryStore.c3Id,
  c3Id => {
    if (typeof c3Id == 'number') {
      getAttr()
    }
  }
)

defineExpose({ getAttr })
// 获取一级分类
</script>

<style scoped></style>
